<script setup>
const { data } = await useFetch("/api/list");
const { typeList } = data.value;
const allList = data.value.allList.filter((item) => item.icon_image);
const goGame = () => {
  navigateTo("/detail");
};
</script>
<template>
  <div>
    <Container>
      <div class="pt-[80px]">
        <div class="flex flex-col sm:flex-row">
          <div class="flex-1">
            <div class="text-[20px] sm:text-[24px] pb-5 sm:pb-10">全部游戏</div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
              <div
                v-for="(item, index) in allList"
                :key="index"
                class="group cursor-pointer overflow-hidden rounded-xl"
                @click="goGame"
              >
                <div
                  :style="{ backgroundImage: 'url(' + item.icon_image + ')' }"
                  class="w-full pb-[120%] origin-bottom overflow-hidden bg-center bg-cover rounded-xl group-hover:scale-105 transition-all duration-500"
                ></div>
                <div class="p-2">
                  <div class="text-[18px] line-clamp-1">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-[100%] sm:w-[250px] ml-0 sm:ml-10 py-6">
            <div class="text-[20px] sm:text-[24px]">游戏类型</div>
            <div class="mt-8 grid grid-cols-2 gap-5">
              <div
                v-for="(item, index) in typeList"
                :key="index"
                class="hover:bg-[#222222] border-[1px] line-clamp-1 cursor-pointer border-[#333] rounded-md text-center leading-[36px] h-[36px] bg-[#20222e]"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
    <DownLoad class="mt-10"></DownLoad>
  </div>
</template>
<style scoped lang="scss"></style>
